<template>
	<view>
		<form @submit.prevent="onSubmit" @reset="formReset">
		<view class="uni-title uni-common-pl" style="margin: 10px;">专业</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
							
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange1" :value="index1" :range="array1" v-model="message.major" name="major">
						<view class="uni-input">{{array1[index1]}}</view>
					</picker>
				</view>
			</view>
		</view>
		<view class="uni-title uni-common-pl" style="margin: 10px;">线路/处所</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
							
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange2" :value="index2" :range="array2" v-model="message.line" name="line">
						<view class="uni-input">{{array2[index2]}}</view>
					</picker>
				</view>
			</view>
		</view> 
		
		<view class="uni-title uni-common-pl" style="margin: 10px;">隐患排查情况</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
							
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange3" :value="index3" :range="array3" v-model="message.danger" name="danger">
						<view class="uni-input">{{array3[index3]}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="uni-title uni-common-pl" style="margin: 10px;">位置对象</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
							
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange4" :value="index4" :range="array4" v-model="message.location" name="location">
						<view class="uni-input">{{array4[index4]}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="uni-title uni-common-pl" style="margin: 10px;">不符合情况</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
							
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange5" :value="index5" :range="array5" v-model="message.fault" name="fault">
						<view class="uni-input">{{array5[index5]}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="uni-title uni-common-pl" style="margin: 10px;">隐患等级</view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
								
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange6" :value="index6" :range="array6" v-model="message.grade" name="grade">
						<view class="uni-input">{{array6[index6]}}</view>
					</picker>
				</view>
			</view>
		</view>
		
		<view class="uni-title uni-common-pl" style="margin: 10px;">故障详情</view>
		<view class="uni-title uni-common-pl"></view>
		<view class="uni-textarea" style="background-color: darkgrey; height: 1cm; margin: 10px;">
			<textarea type="text" placeholder-style="color:#C0C0C0" placeholder="请输入故障详情" v-model="message.details" name="details"/>
		</view>
		
		<view>
		    <button type="submit" @click="onSubmit" style="background-color: #3CB371; margin:10px;">提交表单</button>
		    <button type="reset" @click="formReset">重置表单</button>
		</view>
		
		
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'picker',
				array1: ['供电', '工务', '通号'],
				index1: 0,
				array2: ['十二号线','十三号线'],
				index2: 0,
				array3: ['合格','不合格'],
				index3: 0,
				array4: ['位置对象'],
				index4: 0,
				array5: ['不符合情况'],
				index5: 0,
				array6: ['一般隐患'],
				index6: 0,
				message:{
					major:"",
					line:"",
					danger:"",
					location:"",
					fault:"",
					grade:"",
					details:"",
				},
				obj:null
			};
		},
		methods: {
			 bindPickerChange1: function(e) {
			            console.log('picker发送选择改变，携带值为', e.detail.value)
			            this.index1 = e.detail.value
			        },
			bindPickerChange2: function(e) {
			           console.log('picker发送选择改变，携带值为', e.detail.value)
			           this.index2 = e.detail.value
			       },
			bindPickerChange3: function(e) {
			           console.log('picker发送选择改变，携带值为', e.detail.value)
			           this.index3 = e.detail.value
			       },
			bindPickerChange4: function(e) {
			           console.log('picker发送选择改变，携带值为', e.detail.value)
			           this.index4 = e.detail.value
			       },
			bindPickerChange5: function(e) {
			           console.log('picker发送选择改变，携带值为', e.detail.value)
			           this.index5 = e.detail.value
			       },
			bindPickerChange6: function(e) {
			           console.log('picker发送选择改变，携带值为', e.detail.value)
			           this.index6 = e.detail.value
			       },
			onSubmit(e) {
			  e.preventDefault(); // 防止默认表单提交
			  console.log(this.message); // 从'message'对象中访问表单数据
			  this.obj = this.message; // 将表单数据分配给'obj'
			  uni.setStorageSync('formData', this.obj); // 将表单数据保存在本地存储中
			  // 使用uni.navigateTo或其他导航方法导航到第二个页面
			  uni.navigateTo({
			  	url:"/pages/HazardChecking/HazardChecking"
			  })
			},
			formReset: function(e) {
							this.index1 = 0;
							    this.index2 = 0;
							    this.index3 = 0;
							    this.index4 = 0;
							    this.index5 = 0;
							    this.index6 = 0;
							    
							    this.message = {
							        major: "",
							        line: "",
							        danger: "",
							        location: "",
							        fault: "",
							        grade: "",
							        details: ""
							    };
						}
		}
	}
</script>

<style>
	.uni-list{
		margin: 10px;
		background-color: darkgray;
		height: 1cm;
		border: 1px;
		box-sizing: border-box;
	}
</style>
